/* eslint-disable vue/no-template-shadow */
<template>
  <a-modal
    title="查看隐患信息"
    :width="1400"
    :maxHeight="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    style="margin-top: -40px"
  >
    <a-spin :spinning="confirmLoading">
      <a-divider orientation="left" style="font-weight: bold; margin-top: -10px">
        <a-icon type="profile" style="margin-right: 8px;color:rgb(13, 158, 243);"></a-icon>基本信息
      </a-divider>
      <a-row :gutter="24">
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              style="display: none;"
            >
              <a-input v-decorator="['qhseXyDangerId']" />
            </a-form-item>
            <a-form-item
              label="检查人员"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('checkName')">
                <a-input placeholder="请输入检查人员" v-decorator="['checkName']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="检查类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('checkType')">
                <a-input v-decorator="['checkType']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="数据来源"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('enterSys')">
                <a-input v-decorator="['enterSys']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="检查时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('checkDate')">
                <a-input v-decorator="['checkDate']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6">
          <a-form :form="form" >
            <a-form-item
              label="录入时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('enterTime')">
                <a-input v-decorator="['enterTime']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="属地单位"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="organizationName">
                <a-input placeholder="请选择违章单位" v-model="organizationName" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="发包单位"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="contractingUnitName">
                <a-input placeholder="请选择发包单位" v-model="contractingUnitName" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="作业专业"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('workSpecialty')">
                <a-input placeholder="请选择作业专业" v-decorator="['workSpecialty']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="作业项目"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('workItem')">
                <a-input placeholder="请输入作业项目" v-decorator="['workItem']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-divider orientation="left" style="font-weight: bold; margin-top: -10px">
        <a-icon type="info-circle" style="margin-right: 8px;color:rgb(13, 158, 243);"></a-icon>关键作业信息
      </a-divider>
      <a-row :gutter="24">
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="关键作业类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('workType')">
                <a-input placeholder="请选择关键作业类型" v-decorator="['workType']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="12" >
          <a-form :form="form">
            <a-form-item
              label="关键作业内容"
              :labelCol="{ sm: { span: 4 } }"
              :wrapperCol="{ sm: { span: 20 } }"
            >
              <a-tooltip :title="form.getFieldValue('workContent')">
                <a-input placeholder="请选择关键作业内容" v-decorator="['workContent']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="作业风险等级"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('workRisk')">
                <a-input placeholder="请输入作业风险等级" v-decorator="['workRisk']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-divider orientation="left" style="font-weight: bold; margin-top: -10px">
        <a-icon type="alert" style="margin-right: 8px;color:rgb(13, 158, 243);"></a-icon>隐患信息
      </a-divider>
      <a-row :gutter="24">
        <a-col :span="18" >
          <a-form :form="form">
            <a-form-item
              label="隐患条款"
              :labelCol="labelCol_A"
              :wrapperCol="wrapperCol_A"
              style="width: 107.2%; margin-left: -27px"
            >
              <a-tooltip :title="form.getFieldValue('dangerClause')">
                <a-input placeholder="请选择隐患条款" v-decorator="['dangerClause']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
            >
              <a-radio-group v-decorator="['dangerTypeCategory']" disabled>
                <a-radio value="通用隐患" style="margin-left: 20px">通用隐患</a-radio>
                <a-radio value="专业隐患" style="margin-left: -10px">专业隐患</a-radio>
                <a-radio value="其他" style="margin-left: -10px">其他</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="18" >
          <a-form :form="form">
            <a-form-item
              label="隐患描述"
              :labelCol="labelCol_A"
              :wrapperCol="wrapperCol_A"
              style="width: 107.2%; margin-left: -28px"
            >
              <a-tooltip :title="form.getFieldValue('description')">
                <a-textarea
                  v-decorator="['description']"
                  placeholder="请输入隐患描述"
                  :rows="2"
                  :span="40"
                  disabled
                />
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="隐患级别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('dangerType')">
                <a-input placeholder="请选择隐患级别" v-decorator="['dangerType']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="位置区域"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('location')">
                <a-input placeholder="请选择位置区域" v-decorator="['location']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8" >
          <a-form :form="form">
            <a-form-item
              label="隐患所属相关方公司"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('relatedCompany')">
                <a-input placeholder="请输入隐患所属相关方公司" v-decorator="['relatedCompany']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="隐患类别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="dangerCategory">
                <a-input placeholder="请选择隐患类别" v-model="dangerCategory" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="对应体系要素"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('hseElement')">
                <a-input placeholder="请选择对应要素体系" v-decorator="['hseElement']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="原因分析"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('causeAnalysis')">
                <a-input placeholder="请选择原因分析" v-decorator="['causeAnalysis']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <!-- <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="归属部门"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('directDepartment')">
                <a-input placeholder="请选择归属部门" v-decorator="['directDepartment']" disabled/>
              </a-tooltip>
            </a-form-item>
            <a-form-item
              style="display: none;"
            >
              <a-input v-decorator="['userId']" />
            </a-form-item>
            <a-form-item
              style="display: none;"
            >
              <a-input v-decorator="['dangerPic']" />
            </a-form-item>
            <a-form-item
              style="display: none;"
            >
              <a-input v-decorator="['reformerPic']" />
            </a-form-item>
            <a-form-item
              style="display: none;"
            >
              <a-input v-model="organizationId" />
            </a-form-item>
            <a-form-item
              style="display: none;"
            >
              <a-input v-decorator="['reformerUserId']" />
            </a-form-item>
          </a-form>
        </a-col> -->
        <a-col :span="15" style="margin-bottom: -57px">
          <a-form :form="form">
            <a-form-item label="隐患图片" :labelCol="labelCol_A" :wrapperCol="wrapperCol_A">
              <span v-show="showDanger">无</span>
              <a-upload
                name="file"
                list-type="picture-card"
                :file-list="dangerFileList"
                :show-upload-list="showUploadList"
                data-type="jpg|png|jpeg|JPG|PNG|JPEG"
                ref="Pics"
                @preview="handlePreview"
                multiple
              >
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-divider orientation="left" style="font-weight: bold;">
        <a-icon type="tool" style="margin-right: 8px;color:rgb(13, 158, 243);"></a-icon>整改信息
      </a-divider>
      <a-row :gutter="24">
        <!-- <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="整改负责人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('reformerUserName')">
                <a-input
                  disabled
                  v-decorator="['reformerUserName']"
                  placeholder="请选择整改人员姓名"/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col> -->
        <a-col :span="6" >
          <a-form :form="form">
            <a-form-item
              label="限期整改时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('reformerDate')">
                <a-input v-decorator="['reformerDate']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col span="12" style="margin-bottom: -57px">
          <a-form :form="form">
            <a-form-item label="整改图片" :labelCol="labelCol_A" :wrapperCol="wrapperCol_A">
              <span v-show="showReformer">无</span>
              <a-upload
                name="file"
                list-type="picture-card"
                :file-list="reformerFileList"
                :show-upload-list="showUploadList"
                data-type="jpg|png|jpeg|JPG|PNG|JPEG"
                ref="Pics"
                @preview="handlePreview"
                multiple
              >
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12" style="margin-top: -20px;">
          <a-form :form="form">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group v-decorator="['status']" disabled>
                <a-radio value="未整改" style="margin-left: 100px">不验收</a-radio>
                <a-radio value="已整改" style="margin-left: 60px">验收</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-divider orientation="left" style="font-weight: bold; margin-top: -10px" v-show="showCheck">
        <a-icon type="check-circle" style="margin-right: 8px;color:rgb(13, 158, 243);"></a-icon> 验收信息
      </a-divider>
      <a-row :gutter="24" v-show="showCheck" style="margin-bottom:-30px">
        <a-col :span="6">
          <a-form :form="form">
            <a-form-item
              label="验收时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tooltip :title="form.getFieldValue('acceptanceDate')">
                <a-input v-decorator="['acceptanceDate']" disabled/>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="18" >
          <a-form :form="form">
            <a-form-item
              label="验收描述"
              :labelCol="labelCol_A"
              :wrapperCol="wrapperCol_A"
              style="width: 107.2%; margin-left: -28px"
            >
              <a-tooltip :title="form.getFieldValue('checkDescription')">
                <a-textarea
                  disabled
                  v-decorator="['checkDescription']"
                  placeholder="请输入验收描述"
                  :rows="1"
                  :span="40"
                />
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>
<script>
  import moment from 'moment'
  import { getQHSEDangerCategoryTree, getQHSECrossDangerDetail } from '@/api/modular/system/QHSEDanger'
  import { DatePicker, TreeSelect, Select, Input, Upload } from 'ant-design-vue'
  import { STable, XCard, XDown } from '@/components'
  function getBase64 (file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    })
  }
  export default {
    components: {
      XDown,
      XCard,
      STable,
      DatePicker,
      TreeSelect,
      Select,
      Input,
      Upload
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol_A: {
          xs: { span: 12 },
          sm: { span: 3 }
        },
        wrapperCol_A: {
          xs: { span: 36 },
          sm: { span: 20 }
        },
        labelCol_S: {
          xs: { span: 12 },
          sm: { span: 6 }
        },
        wrapperCol_S: {
          xs: { span: 20 },
          sm: { span: 13 }
        },
        count: 1,
        visible: false,
        confirmLoading: false,
        data: [],
        replaceFields: {
          children: 'children',
          title: 'title',
          key: 'id',
          value: 'id'
        },
        form: this.$form.createForm(this),
        QHSEDangerCategoryTree: [],
        Modalvisible: false,
        dangerCategory: '',
        organizationId: '',
        organizationName: '',
        contractingUnitName: '',
        dangerFiles: [],
        reformerFiles: [],
        previewVisible: false,
        previewImage: '',
        flag: true,
        dangerFileList: [],
        reformerFileList: [],
        showUploadList: {
          showRemoveIcon: false,
          showDownloadIcon: false,
          showPreviewIcon: true
        },
        showCheck: false,
        showDanger: false,
        showReformer: false
      }
    },
    methods: {
      moment,
      // 关闭模态框（图片预览）
      handlePicCancel () {
        this.previewImage = ''
        this.previewVisible = false
      },
      // 打开模态框（图片预览）
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      getQHSEDangerCategoryTree() {
        getQHSEDangerCategoryTree().then((res) => {
          this.formLoading = false
          if (!res.success) {
            this.QHSEDangerCategoryTree = []
            return
          }
          this.QHSEDangerCategoryTree = res.data
        })
      },
      getQHSECrossDangerDetail(text) {
        getQHSECrossDangerDetail(text).then((res) => {
            // console.log('res:', res)
            // setTimeout(() => {
              this.form.setFieldsValue({
              // 违章ID
              qhseXyDangerId: res.data.qhseXyDangerId,
              // 检查人员ID
              userId: res.data.userId,
              // 检查人员姓名
              checkName: res.data.checkName,
              // 检查时间
              checkDate: res.data.checkDate ? res.data.checkDate.replace('T', ' ') : undefined,
              // 录入时间
              enterTime: res.data.enterTime ? res.data.enterTime.replace('T', ' ') : undefined,
              // 数据来源
              enterSys: res.data.enterSys,
              // 检查类型
              checkType: res.data.checkType,
              // 作业项目
              workItem: res.data.workItem,
              // 关键作业内容
              workContent: res.data.workContent,
              // 作业风险等级
              workRisk: res.data.workRisk,
              // 关键作业类型
              workType: res.data.workType,
              // 作业专业
              workSpecialty: res.data.workSpecialty,
              // 位置区域
              location: res.data.location,
              // 隐患性质分类
              dangerTypeCategory: res.data.dangerTypeCategory,
              // 隐患级别
              dangerType: res.data.dangerType,
              // 隐患条款
              dangerClause: res.data.dangerClause,
              // 隐患描述
              description: res.data.description,
              // 体系要素
              hseElement: res.data.hseElement,
              // 安全沟通
              // observeComm: res.data.observeComm,
              // 原因分析
              causeAnalysis: res.data.causeAnalysis,
              // 归属直线部门
              directDepartment: res.data.directDepartment,
              // 可能后果
              // potentialConsequence: res.data.potentialConsequence,
              // 整改人员ID
              reformerUserId: res.data.reformerUserId,
              // 整改人员姓名
              reformerUserName: res.data.reformerUserName,
              // 整改限期
              reformerDate: res.data.reformerDate ? res.data.reformerDate.replace('T', ' ') : undefined,
              // 验收状态
              status: res.data.status,
              // 验收时间
              acceptanceDate: res.data.acceptanceDate ? res.data.acceptanceDate.replace('T', ' ') : undefined,
              // 验收描述
              checkDescription: res.data.checkDescription,
              // 图片（不用）
              dangerPic: res.data.dangerPic,
              reformerPic: res.data.reformerPic,
              // 隐患所属公司
              relatedCompany: res.data.relatedCompany
          })
        // }, 1)
            this.workSpecialtyValue = this.form.getFieldValue('workSpecialty')
            this.workTypeValue = this.form.getFieldValue('workType')
            // 隐患类别
            this.dangerCategory = res.data.dangerCategory
            // 被检查单位id
            this.organizationId = res.data.organizationId
            // 被检查单位名称
            this.organizationName = res.data.organizationName
            this.contractingUnitName = res.data.contractingUnitName
            this.dangerFiles = res.data.dangerFiles
            this.reformerFiles = res.data.reformerFiles
            if (this.dangerFiles.length === 0) {
              this.showDanger = true
            } else {
              this.showDanger = false
            }
            if (this.reformerFiles.length === 0) {
              this.showReformer = true
            } else {
              this.showReformer = false
            }
            if (res.data.status === '已整改') {
              this.showCheck = true
            } else {
              this.showCheck = false
            }
             // 在组件创建时，将 files 数组转换为 uploadFileList 数组
            this.dangerFileList = this.dangerFiles.map((file, index) => {
              const suffix = file.name.split('.').pop()
              return {
                uid: `file-${index}`,
                name: file.name,
                status: 'done',
                url: `data:image/${suffix};base64,${file.base64Content}`,
                thumbUrl: ''
              }
            })
            this.reformerFileList = this.reformerFiles.map((file, index) => {
              const suffix = file.name.split('.').pop()
              return {
                uid: `file-${index}`,
                name: file.name,
                status: 'done',
                url: `data:image/${suffix};base64,${file.base64Content}`,
                thumbUrl: ''
              }
            })
            return res.data
        })
      },
      queryDetail(record) {
        const param = { 'id': record.qhseXyDangerId }
        this.getQHSECrossDangerDetail(param)
      },
      // 初始化方法
      edit(record) {
        this.queryDetail(record)
        // console.log('--this is record from edit--', record)
        this.confirmLoading = true
        this.visible = true
        this.getQHSEDangerCategoryTree()
        // 基本信息加人表单
        this.confirmLoading = false
      },
      handleSubmit() {
        this.confirmLoading = false
        this.handleCancel()
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        // 清理子表单中数据
        this.data = []
      },
      handleModalCancel() {
        this.Modalvisible = false
      }
    }
  }
</script>
<style scoped>
  *[disabled] {
    color: black;
    background-color: whitesmoke;
    cursor: not-allowed;
    opacity: 0.5;
  }
  .ant-select-disabled {
    color: black;
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
